<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/c/font_4003170_jxxuaiujokd.css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      a {
        text-decoration: none;
      }
      li {
        list-style: none;
      }
      header {
        position: relative;
      }
      header img {
        width: 140px;
        height: 60px;
        margin: 20px 10px 0 0;
        float: left;
      }
      header span {
        width: 2px;
        height: 50px;
        background-color: #cccccc;
        display: block;
        float: left;
        border-radius: 1px;
        margin: 25px 0 0 0;
      }
      header .li1 {
        float: left;
        margin: 28px 0 0 10px;
      }
      header li p {
        font-weight: 700;
      }
      header li .p1 {
        color: #e10303;
      }
      header .p2 {
        color: #cccccc;
        font-size: 12px;
        float: left;
        margin: 50px 10px 0 900px;
      }
      header .a1 {
        color: #2b5beb;
        font-size: 12px;
        float: left;
        margin: 50px 10px 10px;
      }
      ul {
        width: 80px;
        height: 20px;
        margin-top: 50px;
        float: left;
        position: relative;
        overflow: hidden;
      }
      header ul:hover {
        overflow: visible;
      }
      header ul:hover li {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px dotted #ccc;
      }
      header ul:hover .first {
        border-top: 1px solid #ccc;
      }
      ul li {
        width: 80px;
        height: 20px;
        background-color: #fff;
        position: relative;
        z-index: 1;

        padding: 0 0 0 7px;
        box-sizing: border-box;
        border: none;
      }

      ul .last {
        border-bottom: 1px solid #ccc;
      }
      ul li a {
        display: block;
        font-size: 12px;
        line-height: 20px;
        color: #000;
      }
      ul #anniu {
        font-size: 20px;
        position: absolute;
        top: -14px;
        right: 4px;
        z-index: 2;
      }
      /* 划过出现下划线 */
      .xiahuaxian:hover {
        text-decoration: underline;
      }
      /* 划过文字变色 */
      #moren:hover {
        color: #2a23c4;
      }
      .mowen {
        font-size: 12px;
        color: #dcdcdc;
        display: inline-block;
        vertical-align: top;
        margin-top: 16px;
      }
      header {
        height: 92px;
        width: 100%;
        background-color: #fff;
      }
      /* 轮播图 */
      nav {
        width: 100%;
        height: 550px;
        background-color: #000;
        position: relative;
      }
      img {
        display: block;
        width: 1500px;
        height: 550px;
      }
      .denglu {
        width: 300px;
        height: 320px;
        background-color: #fff;
        position: absolute;
        top: 80px;
        right: 200px;
        box-sizing: border-box;
        padding: 20px 25px;
      }
      .denglu .txt {
        width: 210px;
        height: 40px;
        outline: none;
        border: 1px solid #dcdcdc;
        box-sizing: border-box;
        margin-top: 10px;
        float: right;
        text-indent: 16px;
      }
      .xian {
        display: block;
        width: 250px;
        height: 1px;
        background-color: #dcdcdc;
        float: left;
        border-radius: 1px;
        margin-top: 10px;
      }
      .wenzi a {
        color: #dcdcdc;
      }
      .wenzi #jiacu {
        font-weight: 600;
        color: #e10303;
      }
      .xiawen a {
        font-size: 12px;
        color: #dcdcdc;
        float: right;
        margin-left: 12px;
      }
      .xiawen #lanse {
        color: #2a23c4;
      }
      .xiawen {
        display: block;
        margin: 10px 0;
      }
      .iconfont {
        font-size: 32px;
        color: #ccc;
        line-height: 50px;
      }
      /* 划过变色 */
      .iconfont.icon-weibo-copy {
        margin-right: 2px;
        font-size: 29px;
      }
      .denglu .iconfont.icon-weibo-copy:hover {
        color: #f22929;
      }
      .icon-zhifubaozhifu {
        margin-right: 2px;
      }
      .denglu .icon-zhifubaozhifu:hover {
        color: #e99528;
      }
      .iconfont .icon-sr_baidu {
        margin-right: 2px;
      }
      .denglu .icon-sr_baidu:hover {
        color: #2a23c4;
      }
      .denglu .icon-QQ-circle-fill {
        margin-right: 2px;
      }
      .denglu .icon-QQ-circle-fill:hover {
        color: #4bc1ecda;
      }

      .btn {
        width: 250px;
        height: 40px;
        outline: none;
        border: 1px solid #dcdcdc;
        box-sizing: border-box;
        margin-top: 10px;
        background-color: #e10303;
        color: #fff;
      }
      .denglu p {
        display: block;
        width: 40px;
        height: 40px;
        border: 1px solid #dcdcdc;
        background-color: #f3f3f3;
        border-right: none;
        margin-top: 10px;
        float: left;
        box-sizing: border-box;
      }
      .denglu .icon-jurassic_user {
        font-size: 20px;
        text-align: center;
        line-height: 40px;
      }
      .denglu .icon-mima {
        font-size: 20px;
        text-align: center;
        line-height: 40px;
      }
      /* 尾部标签 */
      footer {
        width: 100%;
        height: 200px;
        background-color: #eee;
        box-sizing: border-box;
        padding: 30px 0 0 0;
      }
      footer div {
        text-align: center;
        font-size: 12px;
        margin-top: 40px;
      }
      footer div a {
        color: #ccc;
      }
      footer div .a1:hover {
        color: #e10303;
        text-decoration: underline;
      }
      footer div .a2:hover {
        color: #e10303;
      }
      footer div a img {
        display: inline-block;
        width: 12px;
        height: 12px;
      }
      footer p {
        font-size: 12px;
        color: #e10303;
        text-align: center;
        line-height: 40px;
      }
    </style>
  </head>
  <body>
    <header>
      <img src="../images/left.jpg" alt="" />
      <span></span>
      <li class="li1">
        <p class="p1">买真酒</p>
        <p>就上酒仙</p>
      </li>
      <p class="p2">欢迎来到酒仙网!</p>
      <a class="a1" href="">免费注册</a>
      <ul>
        <li class="first">
          <a href="">帮助中心</a>
        </li>
        <li><a href="">配送说明</a></li>
        <li><a href="">支付方式</a></li>
        <li><a href="">售后服务</a></li>
        <li class="last"><a href="">企业客户</a></li>
        <a id="anniu" class="iconfont icon-xialaanniu" href=""></a>
      </ul>
    </header>
    <nav>
      <img src="../images/bj.jpg" alt="" />
      <div class="denglu">
        <span class="wenzi"
          ><a id="jiacu" class="xiahuaxian" href="">账号登陆</a
          ><span>　|　</span
          ><a href="" id="moren" class="xiahuaxian">手机动态密码登录</a></span
        >
        <span class="xian"></span>
        <li>
          <p class="iconfont icon-jurassic_user"></p>
          <input class="txt" type="text" placeholder="用户名" />
        </li>
        <li>
          <p class="iconfont icon-mima"></p>
          <input class="txt" type="text" placeholder="密码" />
        </li>

        <input type="button" value="登录" class="btn" />
        <span class="xiawen">
          <a id="lanse" href="" class="xiahuaxian">免费注册</a
          ><a href="" class="xiahuaxian">忘记密码</a></span
        >
        <span class="xian"></span>
        <span class="mowen">使用合作账号登录</span>
        <a class="iconfont icon-QQ-circle-fill" href=""></a>
        <a class="iconfont icon-weibo-copy" href=""></a>
        <a class="iconfont icon-zhifubaozhifu" href=""></a>
        <a class="iconfont icon-sr_baidu" href=""></a>
      </div>
    </nav>
    <footer>
      <div>
        <span>© 酒仙网 2011 jiuxian.com All Rights Reserved</span>　
        <a class="a1" href="">京ICP备17043395号</a>　
        <a class="a2" href=""
          ><img src="../images/警徽.jpg" alt="" /> 京公网安备
          11030102010047号</a
        >
      </div>
      <p>
        购买前请确认达到法定饮酒年龄！酒仙网不销售任何含酒精产品给18岁以下人士！
      </p>
    </footer>
    <script src="../js/01ajax.js"></script>
    <script>
      // 地址
      let baseUrl = "http://localhost:8888";
      // 获取input标签
      let aInputs = document.querySelectorAll("input");
      // 给最后一个input标签添加点击事件。
      aInputs[aInputs.length - 1].onclick = function () {
        params = {
          username: aInputs[0].value,
          password: aInputs[1].value,
        };
        // 调用ajax函数
        ajax({
          url: baseUrl + "/users/login",
          type: "post",
          params,
          fn(resData) {
            resData = JSON.parse(resData);
            if (resData.code == 0) {
              alert("登陆失败 请重试");
            }
            if (resData.code == 1) {
              // 将昵称存入本地：
              localStorage.setItem("nickname", resData.user.nickname);

              // 存token值
              localStorage.setItem("token", resData.token);

              // 存用户id
              localStorage.setItem("uid", resData.user.id);
              // 弹出框
              if (localStorage.getItem("nickname")) {
                alert("欢迎" + localStorage.getItem("nickname"));
              } else {
                alert("登陆失败");
              }

              // 页面跳转 跳转到商品列表
              location.href = "03.首页.html";
            }
            /* if (resData.code == 0) {
              oP.innerText = resData.message; // 登陆失败，用户名或者密码不对。
            } */
          },
        });
      };
    </script>
  </body>
</html>
